<!-- 基本资料展示组件 -->
<template>
  <div class="basic-info">
    <!-- 标题区域 -->
    <div class="title-wrapper">
      <!-- 左侧蓝色竖条 -->
      <div class="title-bar"></div>
      <!-- 标题文字 -->
      <span class="title-text">基本资料</span>
    </div>

    <!-- 标题下方的横线装饰 -->
    <div class="divider-wrapper">
      <!-- 外层细横线 -->
      <div class="divider-line"></div>
      <!-- 内部渐变粗横线 -->
      <div class="divider-gradient"></div>
    </div>

    <!-- 主体内容区域 -->
    <div class="content-wrapper">
      <div class="content-inner">
        <!-- 左侧信息列 -->
        <div class="info-column left-column">
          <!-- 捐赠者编码 -->
          <div class="info-item">
            <div class="info-label">捐赠者编码</div>
            <div class="info-value">{{ donorInfoForm.donorId }}</div>
          </div>

          <!-- 出生日期 -->
          <div class="info-item">
            <div class="info-label">出生日期</div>
            <div class="info-value">
              {{ donorInfoForm.dateOfBirth?.slice(0, 10) }}
            </div>
          </div>

          <!-- 身高 -->
          <div class="info-item">
            <div class="info-label">身高</div>
            <div class="info-value">{{ donorInfoForm.heightInCm }} cm</div>
          </div>

          <!-- 体重 -->
          <div class="info-item">
            <div class="info-label">体重</div>
            <div class="info-value">{{ donorInfoForm.weightInKg }} kg</div>
          </div>

          <!-- 血型 -->
          <div class="info-item">
            <div class="info-label">血型</div>
            <div class="info-value">{{ donorInfoForm.bloodType }}</div>
          </div>

          <!-- 眼睛颜色 -->
          <div class="info-item">
            <div class="info-label">眼睛颜色</div>
            <div class="info-value">{{ donorInfoForm.eyeColor }}</div>
          </div>

          <!-- 头发颜色 -->
          <div class="info-item">
            <div class="info-label">头发颜色</div>
            <div class="info-value">{{ donorInfoForm.hairColor }}</div>
          </div>

          <!-- 皮肤颜色 -->
          <div class="info-item">
            <div class="info-label">皮肤颜色</div>
            <div class="info-value">{{ donorInfoForm.skinColor }}</div>
          </div>
        </div>

        <!-- 右侧信息列 -->
        <div class="info-column right-column">
          <!-- 婚姻状况 -->
          <div class="info-item">
            <div class="info-label">婚姻状况</div>
            <div class="info-value">{{ donorInfoForm.maritalStatus }}</div>
          </div>

          <!-- 种族 -->
          <div class="info-item">
            <div class="info-label">种族</div>
            <div class="info-value">{{ donorInfoForm.ethnicity }}</div>
          </div>

          <!-- 教育程度 -->
          <div class="info-item">
            <div class="info-label">教育程度</div>
            <div class="info-value">{{ donorInfoForm.education }}</div>
          </div>

          <!-- 学校及专业 -->
          <div class="info-item">
            <div class="info-label">学校及专业</div>
            <div class="info-value">{{ donorInfoForm.schoolNameMajor }}</div>
          </div>

          <!-- 平均绩点 -->
          <div class="info-item">
            <div class="info-label">平均绩点</div>
            <div class="info-value">{{ donorInfoForm.gpa }}</div>
          </div>

          <!-- 吸烟情况 -->
          <div class="info-item">
            <div class="info-label">吸烟</div>
            <div class="info-value">
              {{ donorInfoForm.isSmoker === "1" ? "是" : "否" }}
            </div>
          </div>

          <!-- 个性描述 -->
          <div class="info-item">
            <div class="info-label">个性描述</div>
            <div class="info-value">
              {{ donorInfoForm.personalityDescription }}
            </div>
          </div>

          <!-- 最佳技能 -->
          <div class="info-item">
            <div class="info-label">最佳技能</div>
            <div class="info-value">{{ donorInfoForm.bestSkill }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 定义组件接收的 props
const props = defineProps({
  userId: {
    type: String,
    required: true,
    default: "",
  },
  donorInfoForm: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

// 响应式数据
const donorId = ref("");
const userId = ref("");
const loading = ref(true);

// 生命周期钩子
onMounted(() => {
  userId.value = props.userId;
});
</script>

<style lang="scss" scoped>
/* 基础变量定义 */
$color-primary: #2b5cab;
$color-secondary: #a2c4e8;
$color-light-blue: #cedbf0;
$color-gray-200: #e5e7eb;
$color-gray-600: #4b5563;
$border-radius: 2px;

/* 默认字体与颜色 */
$font-default: "Microsoft YaHei", "微软雅黑", sans-serif;
$color-default: #333;

/* 基础容器样式 */
.basic-info {
  width: 100%;
  font-family: $font-default;
  color: $color-default;
}

/* 标题区域 */
.title-wrapper {
  display: flex;
  align-items: center;
  font-family: $font-default;
  color: $color-default;
}

.title-bar {
  width: 6px;
  height: 26px;
  background-color: $color-primary;
}

.title-text {
  margin-left: 10px;
  font-size: 24px;
  font-weight: bold;
  color: $color-primary;
  font-family: $font-default;
}

/* 分割线区域 */
.divider-wrapper {
  position: relative;
  height: 1px;
  background-color: $color-primary;
  margin-top: 18px;
  font-family: $font-default;
  color: $color-default;

  .divider-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: $color-primary;
  }

  .divider-gradient {
    position: absolute;
    top: -2px;
    left: 0;
    width: 460px;
    height: 5px;
    background: linear-gradient(to right, $color-primary, $color-light-blue);
    border-radius: $border-radius;
  }
}

/* 主体内容区域 */
.content-wrapper {
  border: 1px solid $color-secondary;
  border-radius: 8px;
  margin-top: 23px;
  padding: 20px;
  font-family: $font-default;
  color: $color-default;
}

.content-inner {
  display: flex;
  justify-content: space-between;
  font-family: $font-default;
  color: $color-default;
}

/* 信息列样式 */
.info-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: $font-default;
  color: $color-default;

  &.left-column {
    max-width: 48%;
  }

  &.right-column {
    max-width: 500px;
  }
}

/* 信息项样式 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid $color-gray-200;
  padding: 8px 0;
  font-family: $font-default;
  color: $color-default;

  &:last-child {
    border-bottom: none;
  }

  .info-label {
    width: 33.33%;
    font-weight: 500;
    font-family: $font-default;
    color: $color-default;
  }

  .info-value {
    width: 66.66%;
    text-align: right;
    color: $color-gray-600;
    font-family: $font-default;
  }
}
</style>
